<!DOCTYPE html>
<html lang="en">

<head>
    <title>巡检详情</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=yes">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/patrolPageDetail.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_top">
            <div class="app_header">
                <div class="app_headerLeft" @click="back">
                    <span class="iconfont icon-arrow-left-bold"></span>
                </div>
                <div class="app_headerTitle">详细信息</div>
            </div>
        </div>
        <div :class="[detailState == 1?'app_main':'app_main1']">
            <div class="app_main_list1">
                <div class="title">长沙天心区南苑小区1栋1#无负压供水泵房巡检
                    <span v-if="detailState == 2" :class="'stateBtn'+detailState">异常</span>
                    <span v-if="detailState == 3" :class="'stateBtn'+detailState">正常</span>
                </div>
                <div class="txt">创建时间：2022/07/04 08:30</div>
                <div class="txt">任务来源:月度巡检计划</div>
                <div class="txt">所属片区：长沙/天心区</div>
                <div class="txt">截止时间：2022/07/04 08:30</div>
                <div class="daohang">
                    <div class="txt">地址</div>
                    <div class="addressItem">
                        <div class="left">长沙市芙蓉区南苑小区1栋负一二层</div>
                        <div class="btn"><span class="iconfont icon-navigation"></span>导航</div>
                    </div>
                </div>
                <div :class="'showBox'+detailState">{{detailStateName}}</div>
            </div>
            <div class="app_main_list2">
                <div class="listItem">
                    <div class="title">泵房负责人</div>
                    <div class="txt">姓名：张三</div>
                    <div class="txt">电话：13795837284</div>
                    <a href="tel:10086"><div class="phone"><span class="iconfont icon-telephone"></span>联系Ta</div></a>
                </div>
                <div class="listItem">
                    <div class="title">巡检人</div>
                    <div class="txt">姓名：张三</div>
                    <div class="txt">电话：13795837284</div>
                    <a href="tel:10086"><div class="phone"><span class="iconfont icon-telephone"></span>联系Ta</div></a>
                </div>
            </div>
            <div class="app_main_list3">
                <div class="app_main_list3Tabs">
                    <div :class="[list3Tabs == 1?'active':'']" @click="list3Tabs = 1">巡检工作表</div>
                    <div :class="[list3Tabs == 2?'active':'']" @click="list3Tabs = 2">时间轴</div>
                </div>
                <div v-if="list3Tabs == 1" class="app_main_list3Work">
                    <nut-row>
                        <nut-col :span="8">
                            <div class="flex-content">
                                <div class="item1">span:8</div>
                                <div class="item2">span:8</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content">
                                <div class="item1">span:8</div>
                                <div class="item2">span:8</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content">
                                <div class="item1">span:8</div>
                                <div class="item2">span:8</div>
                            </div>
                        </nut-col>
                    </nut-row>
                </div>
                <div v-if="list3Tabs == 2" class="app_main_list3Line"></div>
            </div>
        </div>
        <nut-button v-if="detailState == 1" block>巡检汇报</nut-button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                detailState: 1,
                detailStateName: '',
                list3Tabs: 1,
            },
            mounted() {
                let val = this.detailState
                if (val == 1) {
                    this.detailStateName = '待完成'
                } else if (val == 2) {
                    this.detailStateName = '已完成'
                } else if (val == 3) {
                    this.detailStateName = '已完成'
                }
            },
            watch: {
                detailState(val) {
                    if (val == 1) {
                        this.detailStateName = '待完成'
                    } else if (val == 2) {
                        this.detailStateName = '已完成'
                    } else if (val == 3) {
                        this.detailStateName = '已完成'
                    }
                }
            },
            methods: {
                back() {
                    window.history.go(-1)
                },
            }
        })
    </script>
</body>

</html>